import { App, ComputedRef, Directive, Plugin, Ref, VNode } from "vue";
import { useAuth } from './auth'
function authHandle(func: (v: string | string[]) => ComputedRef<boolean>, v: string | string[], ele: HTMLElement, parentElement: HTMLElement): boolean {
    if (func(v).value) {
        return true
    } else {
        parentElement?.removeChild(ele)
        return false
    }
}
function AuthHandleWrapper(v: string | Array<string>, ele: HTMLElement, parentVNode: HTMLElement) {
    authHandle(useAuth, v, ele, parentVNode)
}
const AuthDirectiveObj: Directive<HTMLElement, string | Array<string>> = {
    mounted(ele: HTMLElement, binding) {
        AuthHandleWrapper(binding.value, ele, ele.parentElement!)
    },
    updated(ele: HTMLElement, binding, vnode, parentVNode) {
        AuthHandleWrapper(binding.value, ele, ele.parentElement!)
    }
}

export const AuthDirective: Plugin<any[]> = {
    install(app: App, op: any) {
        app.directive('auth', AuthDirectiveObj)
    }
}